<template>
  <view class="lawAdvice-container">
    <view class="banner">
      <image
          :src="detail.pic"
          mode="scaleToFill"
          style="width: 100%; height: 10rem"
      />
      <view class="banner-container">
        <view class="container">
          <u-grid :border="false" col="4">
            <u-grid-item
                v-for="(listItem, listIndex) in list"
                :key="listIndex"
                style="padding-top:20rpx"
            >
              <image :src="listItem.icon" class="icon-image"></image>
              <text class="grid-text">{{ listItem.title }}</text>
            </u-grid-item>
          </u-grid>
          <u-toast ref="uToast"/>
        </view>
      </view>
    </view>
    <view class="images-content">
      <rich-text :nodes="detail.content"></rich-text>
    </view>
    <view class="goods-carts">
      <view class="flex-column ">
        <view class="flex-row marginTop">
          <text class="text-decoration-line-through">原价{{ detail.price }}元</text>
          <text class="right">普通会员价</text>
        </view>
        <view class="flex-row marginTop">
          <text class="big">{{ detail.preferential }}</text>
          <text class="small">元/起</text>
        </view>

      </view>
      <view class="btn">
        <u-button
            color="#e43d33"
            shape="circle"
            text="立即咨询"
            @click="open"
        ></u-button>
      </view>

    </view>
    <!--    支付确认弹窗-->
    <u-popup :show="show" :round="10" mode="center" @close="close">
      <view class="poup-container">
        <view class="flex-row">
          <radio-check v-model="radioValue" :localData="radioList1" @changeRadio="change"
                       :price="detail.preferential"></radio-check>
        </view>
        <view class="flex-row" style="margin-top: 1rem;">
          <view class="btn-container">
            <u-button text="线下支付" color="linear-gradient(to bottom, #e43d00 0%, #ff6600 100%)" @click="offlinePay"></u-button>
          </view>

          <view class="btn-container">
            <u-button text="微信支付" type="error" :plain="true" @click="pay"></u-button>
          </view>
        </view>

      </view>
    </u-popup>
  </view>
</template>
<script>
import consultAndServiceConst from "@/static/const/consultAndServiceConst";
import {getToken} from "@/utils/auth";
import {isEmptyString, toast} from "@/utils/common";
import {getStorage} from "@/utils/auth";
import application from "@/static/const/application";
import orderNews from "@/static/const/orderNews";
import radioCheck from "../../components/radioCheck";
import orderManagement from "@/static/const/orderManagement";

export default {
  components: {
    radioCheck
  },
  data() {
    return {
      id: "",
      detail: {
        pic:"",
        vip: undefined,
        sVip: undefined

      }, //详情
      list: [], //列表
      user: {
        vipId: undefined
      },
      show: false,//弹窗
      radioValue: "",//单选框
      radioList1: [
        {
          text: "原价",
          value: "1",
          selected: false
        },
        {
          text: "议定金额",
          value: "2",
          selected: false
        },

      ],
      teamId: "",
      phoneNumber: "",
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.user = getStorage(application.user);
    if(!isEmptyString(options.teamId)){
      this.teamId = options.teamId;
    }
    if(!isEmptyString(options.phone)) {
      this.phoneNumber = options.phone;
    }
  },
  onShow() {
    const that=this;
    uni.$on("bindWechatSuccess", () => {
      that.close();
      this.user = getStorage(application.user);
      that.list=[]
      that.getList();
      that.getDetail();
    });
    this.list=[]
    this.getList();
    this.getDetail();
  },
  methods: {
    //获取列表
    getList() {
      this.$store
          .dispatch("ConsultAndServiceList", consultAndServiceConst.service)
          .then((res) => {
            this.list = res.data;
            if (this.list.length > 4) {
              this.list = this.list.slice(0, 4);
            }
          });
    },
    //获取详情
    getDetail() {
      //获取路由id
      this.$store.dispatch("ConsultAndServiceDetail", this.id).then((res) => {
        this.detail = res.data;
        if (isEmptyString(this.detail.content)) {
          this.detail.content = '<p style="text-align:center;">暂无内容</p>';
        } else {
          this.detail.content = this.detail.content.replace(
              /<img/gi,
              '<img style="max-width:100%;height:auto;display:block;"'
          );
          this.detail.content = this.detail.content.replace(
              /<p/gi,
              '<p style="overflow: hidden;border-radius:10px;"'
          );
        }

        if (!getToken()) {
          this.detail.preferential = "￥" + this.detail.price;
        } else {
          //根据不同用户类型显示不同价格
          switch (this.user.vipId) {
            case "0":
              this.detail.preferential = this.detail.price;
              break;
            case "1":
              //取两位小数
              this.detail.preferential = (
                  this.detail.price-this.detail.price * (this.detail.vip / 100)
              ).toFixed(2);
              break;
            case "2":
              this.detail.preferential =( this.detail.price-this.detail.price * (this.detail.sVip / 100)).toFixed(2);
              break;
            default:
              this.detail.preferential = this.detail.price;
              break;
          }
        }
      });
    },
    //线下支付
    offlinePay(){
       if(isEmptyString(this.radioValue)){
         toast("请选择支付方式");
         return;
       }
       if(isEmptyString(this.radioValue.price)){
         toast("请输入线下金额");
         return;
       }
       if(!this.radioValue.selected){
         toast("请选择支付方式");
         return;
       }
      const price = this.radioValue.price;
       let priceConfirm = price;
      if(price.indexOf("￥")!==-1){
        //去除￥
        priceConfirm=price.substring(1,price.length)
      }
      const that = this;
      let data = {
        price: priceConfirm,
        orderType: consultAndServiceConst.serviceOrder,
        consultingId: this.id,
        payType: orderManagement.payType.offlinePayment,
      };
      if(!isEmptyString(this.teamId)){
        data.teamId = this.teamId;
      }
      if(!isEmptyString(this.phoneNumber)){
        data.fillInPhone = this.phoneNumber;
      }
      this.$store
          .dispatch("GenerateOrder", data)
          .then(() => {
           toast("线下支付成功，等待审核");
            that.close();
          });
    },
    pay() {
      if(isEmptyString(this.radioValue)){
        toast("请选择支付方式");
        return;
      }
      if(isEmptyString(this.radioValue.price)){
        toast("请输入线下金额");
        return;
      }
      if(!this.radioValue.selected){
        toast("请选择支付方式");
        return;
      }
      if(isEmptyString(this.user.openid)){
        toast("请先绑定微信");
        this.close();
        uni.navigateTo({
          url: "/pages/login?state=bindWechat"
        });
        return;
      }
      // #ifdef MP-WEIXIN

      const that = this;

      uni.requestSubscribeMessage({
        //此处填写刚才申请模板的模板ID
        tmplIds: [orderNews.orderRemind],
        success(res) {
          console.log(res);
          if (res.errMsg === "requestSubscribeMessage:ok") {
            toast("订阅成功");
            if (isEmptyString(that.user.phonenumber)) {
              toast("请先绑定手机号");
              that.close();
              uni.navigateTo({
                url: "/pages/mine/info/bindPhone",
              });
            } else {
              const price = that.radioValue.price;
              let  priceConfirm=price;
              if(price.indexOf("￥")!==-1){
                //去除￥
                priceConfirm=price.substring(1,price.length)
              }
              that.paySubmit(priceConfirm);
            }
          }
        },
      });
      // #endif

    },
    paySubmit(price) {
      console.log(price,"price");
      const that = this;
      let data = {
        price: price,
        orderType: consultAndServiceConst.serviceOrder,
        consultingId: this.id,
        orderTime: "15",
        payType: orderManagement.payType.weChatPayment,
      };
      if(!isEmptyString(this.teamId)){
        data.teamId = this.teamId;
      }
      if(!isEmptyString(this.phoneNumber)){
        data.fillInPhone = this.phoneNumber;
      }
      this.$store
          .dispatch("GenerateOrder", data)
          .then((res) => {
            console.log("生成订单成功");
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: res.data.timeStamp,
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              signType: res.data.signType,
              paySign: res.data.paySign,
              success: function () {
                toast("支付成功");
               that.getDetail();
               that.getList()
              },
              fail: function (err) {
                toast(err);
                that.getDetail();
                that.getList()
              },
            });
          });
    },


    /* 打开弹窗*/
    open() {
      // console.log('open');
      this.show = true;
    uni.$emit("showMask");
    },
    /* 关闭弹窗*/

    close() {
      this.show = false
      this.radioValue = ''
      // console.log('close');
    },
    change(e) {
      console.log(e);
      this.radioValue = e;
    }
  },
};
</script>

<style scoped lang="scss">
.lawAdvice-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;

  .banner {
    width: 100%;
    height: 10rem;
    background: linear-gradient(to right, #2193b0, #6dd5ed);

    .banner-container {
      width: 100%;
      height: 100%;
      position: relative;

      .container {
        width: 80%;
        border-radius: 10px;
        border: 1px solid #fff;
        background-color: #fff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        position: absolute;
        top: -20%;
        left: 10%;
        padding: 20rpx 20rpx 0.5rem;

        .icon-image {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }

  .images-content {
    width: 100%;
    padding-left: 40rpx;
    padding-right: 40rpx;
    margin-top: 130rpx;
    padding-bottom: 200rpx;

    .container {
      width: 100%;
      min-height: 1200rpx;
      border-radius: 40rpx;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      image {
        width: 100%;
      }
    }
  }

  .goods-carts {
    width: 100%;
    height: 5rem;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 -2px 0 #cdcdcd;
    padding-right: 20rpx;
    box-sizing: border-box;

    .flex-column {
      display: flex;
      flex-direction: column;
      padding-left: 20rpx;
      color: #999;

      .text-decoration-line-through {
        text-decoration-line: line-through;
      }

      .right {
        margin-left: 20rpx;
        color: black;
        font-size: 1rem;
      }

      .marginTop {
        margin-top: 10rpx;
        align-items: center;
      }

      .big {
        font-size: 1.5rem;
        color: #e43d33;
      }

      .small {
        font-size: 0.8rem;
        color: black;
        margin-left: 10rpx;
        font-weight: bold;
      }
    }

    .btn {
      width: 40%;
    }
  }

  .poup-container {
    width: 700rpx;
    height: 420rpx;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    box-sizing: border-box;

    .flex-row {
      justify-content: space-around;
    }

    .btn-container {
      width: 40%;
    }
  }
}
</style>